<template>
  <div class="grid-box wfull hfull">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';

  const props = defineProps<{rows?: string, columns?: string, areas: string[], columnGap?: string, rowGap?: string}>()
  const columnGap = computed(() => props.columnGap || '0px')
  const rowGap = computed(() => props.rowGap || '0px')

  const gridTemplateAreas = computed(() => {
    let ret: string = ''
    if(!props.areas) return ''

    for(const area of props.areas) {
      if(ret.length > 0) ret += ' '
      ret += `'${area}'`
    }
    return ret
  })

  const columns = computed(() => {
    if(props.columns) return props.columns

    const count = !props.areas || props.areas.length == 0 ? 1 : props.areas[0].split(' ').length
    return `repeat(${count}, minmax(0, 1fr))`
  })

  const rows = computed(() => {
    if(props.rows) return props.rows

    const count = !props.areas || props.areas.length == 0 ? 1 : props.areas.length
    return `repeat(${count}, minmax(0, 1fr))`
  })
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: v-bind(columns);
    grid-template-rows: v-bind(rows);
    grid-template-areas: v-bind(gridTemplateAreas);
    column-gap: v-bind(columnGap);
    row-gap: v-bind(rowGap)
  }
</style>
